/**
* Copyright (c) 2018-present, Chen Guodong
* All rights reserved.
*
* @flow
*/
<template>
  <section class="content">
    <Header title="我的收藏">
      <div class="left" slot="left" @click="goBack">
        <i class="iconfont icon-previewleft" style="font-size: 22px"></i>
      </div>
    </Header>
    <div class="main">
      <mescroll-vue v-if="data && data.length>0" ref="mescroll" :down="mescrollDown" @init="mescrollInit">
        <SlideDelete del-text="取消关注" @del-click="unfollow(item)" v-for="(item,index) in data" :key="index" >
          <li class="project_item" @click="goProject(item)">
            <div class="left">
              <img :src="item.litpic" :alt="item.shorTitle">
          </div>
              <div class="right">
                <p class="top">
                  <b>{{item.shortTitle}}</b>
                  <b :style="{color: getStatusColor(item.status)}">{{item.status | getCN}}</b>
                </p>
                <p class="middle">
                  <b class="type"><span>{{item.type | getCN}}</span></b>
                  <b class="info">
                <span class="area">{{item.levyArea}}m²</span><span style="padding: 0 5px;">|</span><span class="area">{{item.planned}}户</span>
              </b>
                </p>
                <p class="bottom">{{item.address}}</p>
              </div>
          </li>
        </SlideDelete>
      </mescroll-vue>
      <NoData v-if="!(data && data.length>0)"></NoData>
    </div>
  </section>
</template>
<script>
import { reqFollowList, reqProjectUnFllow } from '../../api/index.js';
import MescrollVue from "mescroll.js/mescroll.vue";
import {Divider} from 'vux';
import { setTimeout } from "timers";
import Header from '../../components/Header/Header.vue';
import NoData from '../../components/NoData/NoData.vue';
import SlideDelete from '../../components/SlideDelete/SlideDelete.vue';
export default {
  data() {
    return {
      data: [], //列表数据
      mescroll: null, // mescroll实例对象
      mescrollDown: {
        callback: this.downCallback,
        auto: true,
        isBoth: false
      },
    };
  },
  mounted() {
    this.queryData();

  },
  methods: {
    goBack() {
      if (window.history.length <= 1) {
        this.$router.push({ path: '/' })
        return false
      } else {
        this.$router.go(-1)
      }
    },
    async queryData(data) {
      this.$store.dispatch('changeLoadingVis', { data: true })
      const result = await reqFollowList(data);
      if (result.code === 1) {
        this.data = result.data;
      } else {
        this.$vux.toast.show({ type: "text", text: result.msg || '请求失败!' })
      }
      this.$store.dispatch('changeLoadingVis', { data: false });

    },
    getStatusColor(status) {
      let colors = {
        PLAN: "#fe574d",
        IN_PROGRESS: "#39f",
        COMPLETED: "#3cd686",
      };
      return colors[status];
    },
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    downCallback(mescroll) {
      const self = this;
      self.queryData();
      mescroll.endSuccess();
    },
    async unfollow(item) {
      // 取消关注
      const result = await reqProjectUnFllow({ seqno: item.seqno });
      if (result.code === 1) {
        this.$vux.toast.show({
          type: 'text',
          text: '取消关注成功!'
        });
        this.queryData();
      } else {
        this.$vux.toast.show({
          type: 'text',
          text: result.msg || '取消关注失败!'
        });
      }
    },
    goProject(item){
      this.$router.push({path: '/project', query: {seqno: item.seqno}})
    }
  },
  components: { Header, MescrollVue, SlideDelete, Divider, NoData }
};

</script>
<style lang='less' scoped>
@import "../../util/theme.less";

.content {
  .be-full()
}

.main {
  width: 100%;
  height: calc(~"100% - 46px");
}

// item
.project_item {
  .mix-flex-center();
  margin: 0 10px;
  padding: 10px 0;
  border-bottom: 1px solid @border-base;
  height: 90px;

  &:last-child {
    border: none;
  }

  .left {
    height: 100%;
    flex: 0 1 70px;
    margin-right: 8px;
    border-radius: 5px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
    }
  }

  .right {
    flex: 1;
    overflow: hidden;

    b {
      flex: 1;
      font-size: 14px;
      font-weight: normal;

      &:first-child {
        .mix-text-overflow();
        text-align: left;
      }

      &:last-child {
        text-align: right;
        white-space: nowrap;
      }
    }

    .top {
      .mix-flex-x-center();

      b {
        &:first-child {
          font-weight: 600;
        }

        &:last-child {}
      }

    }

    .middle {
      .mix-flex-x-center();

      .type {
        span {
          background: @primary;
          color: @white;
          font-size: 10px;
          padding: 3px 5px;
          border-radius: 3px;
        }
      }
    }

    .bottom {
      .mix-text-overflow();
    }
  }
}

</style>
